<template>
  <div class="wrap-wrap">
    <!-- 头部搜索+图片 -->
    <home-head></home-head>
    <div class="wrap">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh" head-height="50">
      <!-- 首页banner+下方特点 -->
      <home-banner :banners="banners"></home-banner>
      <!-- 宫格导航内容 -->
      <grid-nav :cates="cates"></grid-nav>
      <!-- 一秒选花 -->
      <choice-flower></choice-flower>
      <!-- 鲜花推荐 -->
      <van-list
        v-model="loading"
        :finished="finished"
        loading-text="不要急，正在加载"
        finished-text="我也是有底线的~"
        :offset="50"
        @load="onLoad"
      >
        <rec-flower :goods="goods" @addCart="addCart"></rec-flower>
      </van-list>
    </van-pull-refresh>
    </div>
    <!-- 底部导航栏 -->
    <tabbar />
  </div>
</template>

<script>
import Tabbar from '@components/Tabbar'
import HomeHead from '@views/Home/components/HomeHead'
import HomeBanner from '@views/Home/components/HomeBanner'
import GridNav from '@views/Home/components/GridNav'
import ChoiceFlower from '@views/Home/components/ChoiceFlower'
import RecFlower from '@views/Home/components/RecFlower'
import { isLogin } from '@utils'
import { Toast } from 'vant'
import { fetchBanners, fetchCates, fetchGoods, addCart } from '@api'

export default {
  components: {
    Tabbar,
    HomeHead,
    HomeBanner,
    GridNav,
    ChoiceFlower,
    RecFlower
  },
  data () {
    return {
      banners: [],
      cates: [],
      goods: [],
      loading: false,
      finished: false,
      page: 1,
      pageSize: 5,
      isLoading: false
    }
  },
  created () {
    this.getBanner()
    this.getCate()
    this.addCart()
  },
  methods: {
    // 获取首页轮播图数据
    getBanner () {
      fetchBanners().then(res => {
        if (res.data.code === 0) {
          this.banners = res.data.data
        }
      })
    },
    // 获取商品分类
    getCate () {
      fetchCates().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
        }
      })
    },
    // 获取推荐商品列表数据
    getGood () {
      fetchGoods({
        categoryId: 72399,
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        // 结束下拉刷新的loading状态
        this.isLoading = false
        // 成功获取数据后，将触底状态变为false
        this.loading = false
        if (res.data.code === 0) {
          this.goods = [...this.goods, ...res.data.data.result]
        }
        if (res.data.code === 700) {
          this.finished = true
        }
      })
    },
    // 下拉刷新
    onRefresh () {
      // 注意顺序 否则会导致第一次下拉刷新获取不到数据
      this.page = 1
      this.finished = false
      this.getGood()
      this.goods = []
    },
    // 上拉加载
    onLoad () {
      this.getGood()
      this.page++
    },
    addCart (id) {
      // 判断是否登录
      if (isLogin) {
        addCart({
          goodsId: id,
          number: 1
        }).then(res => {
          console.log(res)
        })
      } else {
        Toast({
          type: 'error',
          message: '请先登录',
          duration: 2000,
          onClose: () => {
            this.$router.push({
              path: '/login',
              query: {
                from: '/home'
              }
            })
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap-wrap{
  padding-top: 50px;
}
</style>
